<template>
	<view class="conter">
		<u-list v-if="salelist !=0" @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in salelist" :key="index">
				<view class="list_box">
					<view class="box_number">
						<view class="box_image">
							<!-- 照片 -->
							<image :src="imgUrl+item.propImg" mode=""></image>
						</view>
						<view class="box_name">
							<view class="box_name_sha">
								{{ item.propName }}
							</view>
							<view class="">
								x{{ item.countNum ? item.countNum : 0 }}
							</view>
						</view>
						<view class="box_tow_name">
							<view class="box_tow_name_op">
								￥{{ item.unitPrice }}
							</view>
							<view class="box_tow_name_po">
								剩余数量：{{ item.memberPropNum }}
							</view>
						</view>
					</view>
					<view class="time">
						<view>
							{{ item.consignTime }}
						</view>
						<view @click="upgrade(item)" v-if="item.status==1&&item.memberPropNum !=0" class="box_quxiao">
							取消
						</view>
						<view v-if="item.memberPropNum ==0" class="box_quxiao">
							已售完
						</view>
						<view class="box_quxiao" v-if='item.status!=1'>
							已取消
						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
		<view v-if="salelist ==0">
			<image style="
			width: 280rpx;
			height: 280rpx;
			margin: 270rpx 240rpx 0;
			" src="../../static/images/fighting.gif" mode=""></image>
		</view>
		<u-popup bgColor='transparent' :show="show" :round="26" mode="center" @close="close">
			<view class="onclose">
				<view class="clmon">温馨提示</view>
				<view class="clmona">您确定要取消寄售金豆吗？</view>
				<view class="clpmklj">
					<button v-on:click="cancel" style="background: #1C1F25">取消</button>
					<button @click="confirmCancel">确定</button>
				</view>
			</view>
		</u-popup>
		<view class="Abouts" v-if="salelist.length == 0">
			<nodatapage></nodatapage>
		</view>
	</view>
</template>

<script>
	import nodatapage from '../../components/nodatapage/nodatapage.vue';
	import config from "@/config.js"
	import {
		getMemberConsignRecordList,
		postunConsign
	} from '@/api/collect/collect.js';
	export default {
		components: {
			nodatapage
		},
		data() {
			return {
				imgUrl: config.gillUrl,
				salelist: [],
				curPage: 1,
				curPageSize: 6,
				show: false,
				id: 0
			}
		},
		created() {
			this.getsalelist();
		},
		methods: {
			cancel() {
				this.show = false;
			},
			upgrade(item) {
				// console.log(item, 'item')
				this.show = true;
				this.id = item.id
			},
			async getsalelist() {
				// 设置一个 param 对象
				let param = {};
				// 接受 拿过来 数据
				param.curPage = this.curPage;
				param.curPageSize = this.curPageSize;
				// 拿到接口里面的值
				const data = await getMemberConsignRecordList(param);
				// console.log(data, '41454');
				// 获取分页数据
				let _this = this;
				_this.salelist = data.data.pageData
				this.totalSize = data.data.totalSize;
			},
			async scrolltolower() {
				//如果分页数据大于当前页 就执行下一页
				if (this.salelist.length < this.totalSize) {
					this.curPage++;
					//则还有下一页
					let obj = {};
					obj.curPage = this.curPage;
					obj.curPageSize = this.curPageSize;
					const data = await getMemberConsignRecordList(obj);
					data.data.pageData.map((i) => {
						this.salelist.push(i);
					});
				}
			},
			async confirmCancel() {
				let param = {}
				param.id = this.id
				const res = await postunConsign(param)
				// console.log(res, 'quxiao')
				// 关闭弹框
				this.show = false
				// 提示事件
				if (res.code == 200) {
					this.$modal.showToast('取消寄售成功')
					await this.getsalelist()
				} else {
					this.$modal.showToast(res.msg)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.Abouts {
		margin-top: -1200rpx;

		img {
			width: 100%;
		}
	}

	.list_box {
		width: 680rpx;
		height: 334rpx;
		background-color: #16142d;
		border-radius: 14rpx;
		margin: 34rpx;

		.box_number {
			width: 680rpx;
			height: 250rpx;
			display: flex;
			justify-content: space-between;
			padding: 34rpx;

			image {
				width: 150rpx;
				height: 140rpx;
				border-radius: 14rpx;
			}

			.box_name {
				width: 120rpx;
				height: 130rpx;
				color: #ffffff;
				font-family: "font";

				.box_name_sha {
					font-size: 32rpx;
					padding: 15rpx 0 35rpx 0;
				}
			}


			.box_tow_name {
				width: 250rpx;
				height: 130rpx;
				color: #ffffff;
				font-family: "font";

				.box_tow_name_op {
					font-size: 32rpx;
					padding: 15rpx 0 35rpx 80rpx;
				}

				.box_tow_name_po {
					padding: 0 0 0 20rpx;
				}
			}
		}

		.time {
			width: 680rpx;
			height: 120rpx;
			margin-top: -40rpx;
			color: #ffffff;
			font-family: "font";
			padding: 0 34rpx;
			display: flex;
			justify-content: space-between;

			.box_quxiao {
				width: 110rpx;
				height: 50rpx;
				background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
				text-align: center;
				line-height: 52rpx;
				border-radius: 14rpx;
				font-size: 20rpx;
				margin: 50rpx 0 0 0;
			}
		}
	}

	.onclose {
		width: 678rpx;
		height: 350rpx;
		background: #0D0E11;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		border: 2rpx solid #8A92A3;
		position: relative;

		.clmon {
			font-size: 35rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			margin-top: 34.88rpx;
		}

		.clmona {
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			margin-top: 50rpx;
		}

		.clpmklj {
			width: 678rpx;
			position: absolute;
			bottom: 36.63rpx;
			display: flex;
			justify-content: space-between;

			button {
				width: 230rpx;
				height: 77rpx;
				background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 26rpx;
				font-size: 35rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>